<style scoped>
</style>

<template>

  <div>

    <Modal
      v-model="IsModalShow"
      :title="modalFormTitle"
      :mask-closable="false"
      @on-cancel="cancel"
      width="600"
    >
      <Form
        ref="modalForm"
        :model="modalForm"
        :label-width="100"
        value=true
        style="padding: 3px 60px"
      >
        <Form-item
          label="设备名称"
          prop="devName"
          :rules="{required: true, message: '必填,1-50位字符',min:1,max:50,  trigger:'blur',type:'string'}"
        >
          <Input
            v-model="modalForm.devName"
            maxlength=50
          ></Input>
        </Form-item>
        <Form-item
          label="设备厂商"
          prop="devManufactory"
        >
          <Input
            v-model="modalForm.devManufactory"
            maxlength=50
          ></Input>
        </Form-item>
        <Form-item
          label="设备型号"
          prop="devModel"
          :rules="{required: true, message: '必填',  trigger:'blur',type:'string'}"
        >
          <Input
            v-model="modalForm.devModel"
            maxlength=20
          ></Input>
        </Form-item>
        <Form-item
          label="IMEI"
          prop="imei"
          :rules="{required: true, message: '必填', trigger:'blur',type:'string'}"
        >
          <Input
            v-model="modalForm.imei"
            maxlength=20
          ></Input>
        </Form-item>
        <Form-item label="ICCID">
          <Input
            v-model="modalForm.iccid"
            maxlength=25
          ></Input>
        </Form-item>
        <Form-item
          label="运营商"
          prop="operator"
        >
          <RadioGroup
            v-model="modalForm.operator"
            type="button"
            size="large"
          >
            <Radio label="中国电信"></Radio>
            <Radio label="中国移动"></Radio>
            <Radio label="中国联通"></Radio>
          </RadioGroup>
        </Form-item>
        <Form-item label="所属商铺">
          {{modalForm.shopName}}
        </Form-item>
        <Form-item label="安装时间">
          <DatePicker
            type="date"
            v-model="modalForm.installDate"
            format="yyyy-MM-dd"
            placeholder="请选择时间"
            style="width:100%"
          ></DatePicker>
        </Form-item>
        <Form-item label="店铺地址">
          <Input
            v-model="modalForm.shopAddr"
            type="textarea"
            :disabled="true"
            :rows="2"
            maxlength=30
          ></Input>
        </Form-item>
        <Form-item label="安装位置">
          <Input
            v-model="modalForm.installAddr"
            type="textarea"
            :rows="2"
            maxlength=30
          ></Input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button
          type="default"
          @click="cancel"
        >关闭</Button>
        <Button
          type="primary"
          :loading="modalForm_loading"
          @click="saveForm('modalForm')"
        >保存</Button>
      </div>
    </Modal>
  </div>

</template>

<script>
import { saveDevice, updateDevice } from "@/api/asset";
import { getDeptCascader } from "@/api/system";
import { formatDate } from "@/libs/util";
export default {
  props: {
    parentForm: {
      type: Object,
      default: function() {
        return {
          deptId: "",
          devId: "",
          devName: "",
          devModel: "",
          dutyImage: "",
          friendName: "",
          imei: "",
          iccid: "",
          installDate: "",
          installAddr: "",
          remark: "",
          shopAddr: ""
        };
      }
    },
    modalShow: {
      type: Boolean,
      default: true
    },
    modalFormTitle: {
      type: String,
      default: "添加设备"
    }
  },
  data() {
    return {
      IsModalShow: false,
      modalForm: {},
      modalForm_loading: false
    };
  },
  watch: {
    modalShow(curVal, oldVal) {
      this.IsModalShow = curVal;
      if (curVal) {
        this.modalForm = Object.assign(this.parentForm);
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    cancel() {
      this.$emit("listenModalForm");
    },
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.modalForm_loading = true;
          let params = this.modalForm;

          if (params.installDate) {
            if (params.installDate instanceof Date) {
              let str = formatDate(params.installDate);
              params.installDate = str;
            } 
          }
          try {
            let result;
            if (params.devId) {
              result = await updateDevice(params);
            } else {
              result = await saveDevice(params);
            }
            if (result.code == 0) {
              this.$emit("listenModalForm");
              this.$emit("refreshTableList");
            }
          } catch (err) {
            console.log(err);
            this.$Message.error("服务器异常，稍后再试");
          }
          this.modalForm_loading = false;
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    }
  }
};
</script>
